<template>
    <div class="protocol-box" v-loading="loading">
        <div class="protocol-option-box">
            <div class="input-box">
                <span class="input-title">所属范围</span>
                <el-select @change="selectChange" style="width:150px;" v-model="typeId">
                    <el-option v-for="(item, index) in protocolList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-button type="success" class="btn" @click="toQuestion(null)">新建</el-button>
            </div>
        </div>
        <div class="table-box">
            <el-table :data="tableData" ref="table" border style="width: 100%">
                <el-table-column min-width="80" prop="questionId" label="ID"></el-table-column>
                <el-table-column min-width="120" label="所属范围">
                    <template slot-scope="scope">
                        <div v-if="scope.row.typeId === 1">社区规范</div>
                        <div v-if="scope.row.typeId === 2">游戏单</div>
                        <div v-if="scope.row.typeId === 3">视频</div>
                        <div v-if="scope.row.typeId === 4">游戏点评</div>
                        <div v-if="scope.row.typeId === 5">抽奖</div>
                        <div v-if="scope.row.typeId === 6">靠谱队友测试</div>
                        <div v-if="scope.row.typeId === 7">队长考核</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="200" prop="title" label="题目"></el-table-column>
                <el-table-column min-width="100" prop="rightAnswer" label="正确答案"></el-table-column>
                <el-table-column min-width="100" prop="answerOne" label="错误答案1"></el-table-column>
                <el-table-column min-width="100" label="错误答案2">
                    <template slot-scope="scope">
                        <div v-if="scope.row.answerTwo">{{ scope.row.answerTwo }}</div>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="错误答案3">
                    <template slot-scope="scope">
                        <div v-if="scope.row.answerThree">{{ scope.row.answerThree }}</div>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="备注">
                    <template slot-scope="scope">
                        <div v-if="scope.row.toast">{{ scope.row.toast }}</div>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" prop="status" label="状态">
                    <template slot-scope="scope">
                        <div style="color:#F56C6C;" v-if="scope.row.status === -1">
                            <span>未上架</span>
                        </div>
                        <div style="color:#F56C6C;" v-if="scope.row.status === 0">
                            <span>待上架</span>
                        </div>
                        <div style="color: #67C23A;" v-else-if="scope.row.status === 1">
                            <span>已上架</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status === 1">
                            <el-button @click="changeStatus(scope.row, -1)" type="text" size="small" style="color: #F56C6C;">下架</el-button>
                        </div>
                        <div v-if="scope.row.status === -1">
                            <el-button @click="changeStatus(scope.row, 1)" type="text" size="small" style="color: #67C23A;">上架</el-button>
                        </div>
                        <div>
                            <el-button @click="toQuestion(scope.row.questionId)" type="text" size="small">编辑</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog class="protocol-dialog" :visible.sync="dialogVisible" width="500px">
            <question :dialogVisible="dialogVisible" :protocolList="protocolList" :isShow="dialogVisible" :questionId="questionId" :dialogClose="dialogClose" />
        </el-dialog>
    </div>
</template>

<script>
import question from './component/question'
export default {
    components: {
        question
    },
    data () {
        return {
            questionId: null,
            typeId: null,
            tableData: [],
            protocolList: [
                {
                    label: '全部',
                    value: null
                },
                {
                    label: '社区规范',
                    value: 1
                },
                {
                    label: '游戏单',
                    value: 2
                },
                {
                    label: '视频',
                    value: 3
                },
                {
                    label: '游戏点评',
                    value: 4
                },
                {
                    label: '抽奖',
                    value: 5
                },
                {
                    label: '靠谱队友测试',
                    value: 6
                },
                {
                    label: '队长考核',
                    value: 7
                }
            ],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            loading: false,
            dialogVisible: false
        }
    },
    created () {
        this.getQuestionList(1)
    },
    methods: {
        getQuestionList (pageNum) {
            let params = {
                typeId: this.typeId,
                pageNum,
                pageSize: this.pageSize
            }
            this.$http.get('/exam/getQuestionList', { params }).then(res => {
                if (res.code === '0') {
                    this.tableData = res.data
                    this.total = res.count
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        changeStatus (item, status) {
            let params = {
                questionId: item.questionId,
                status
            }
            this.$http.get('/exam/updateQuestionStatus', { params }).then(res => {
                console.log(res)
                if (res.code === '0') {
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    })
                    item.status = status
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        toQuestion (id) {
            this.questionId = id
            this.dialogVisible = true
        },
        dialogClose (type) {
            this.dialogVisible = false
            if (type === 'submit') this.getQuestionList(1)
        },
        selectChange () {
            this.type = ''
            this.sort = ''
            this.$refs.table.clearSort()
            this.getQuestionList(1)
        },
        // 页码切换
        sizeChange (val) {
            this.pageNum = 1
            this.pageSize = val
            this.getQuestionList(1)
        },
        // 页容切换
        pageChange (val) {
            this.pageNum = val
            this.getQuestionList(this.pageNum)
        }
    }
}
</script>

<style lang="scss" scoped>
    .protocol-box {
        .input-box {
            font-size: 14px;
            font-weight: 500;
            .input-title {
                margin: 0 10px 0 20px;
                margin-left: 0;
            }
            .btn {
                margin-left: 10px;
                margin-bottom: 10px;
            }
        }
        .protocol-dialog {
            /deep/ .el-dialog__header {
                padding-top: 0;
                padding-bottom: 1px;
            }
            /deep/ .el-dialog__body {
                padding-top: 10px;
            }
        }
        .act-rule-form {
            /deep/.el-form-item__content {
                margin-left: 0 !important;
            }
        }
        .tools {
            display: flex;
            margin-top: 10px;
            padding-right: 20px;
            justify-content: flex-end;
        }
    }
</style>
